<template lang="">
  <div class="box">
    
    <div class="deng">
      <h1>在线教育网后台管理系统</h1>
      <div class="ipt"> 
        <i class="el-icon-user-solid"></i> 
        <input class="el-icon-user-solid" type="text" placeholder="请输入用户名" v-model="email" @input="user"></input>
        <span v-show="id==0">您需要输入用户名</span>
        <span v-show="id==1">长度在5-20之间</span>
        <span v-show="id==2">请输入正确的邮箱地址</span>
      </div>
      <div class="ipt"> <i class="el-icon-s-goods"></i>
        <input type="password" placeholder="请输入用户密码" v-model="password" @input="pwss"></input>
        <span v-if="idx==1">您需要输入密码</span>
        <span v-show="idx==2">长度在5-20之间</span>
        <span v-show="idx==3"></span>
      </div>
      <div>
        <el-button class="btn" type="primary" @click="login">登录</el-button>
      </div>
      <div class="zi" @click="add">
        您没有账户？ 点击注册
      </div>
    </div>
  </div>
</template>
<script>
// import axios from '../request/http'
// import router from '@/router'
import { login } from '../request/api'
export default {
  data() {
    return {
      email: '27732357@qq.com',
      password: '321321',
      id: 0,
      idx: 1
    }
  },
  methods: {
    pwss() {
      if (this.password.length == 0) {
        this.idx = 1
      } else if (this.password.length < 5) {
        this.idx = 2
      } else if (this.password.length >= 5) {
        this.idx = 3
      }
    },
    user() {
      let ema = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (this.email.length == 0) {
        this.id = 0
      } else if (this.email.length < 5) {
        this.id = 1
      } else if (!ema.test(this.email)) {
        this.id = 2
      } else {
        this.id = 1
      }
    },
    // 登录后台
    login() {
      login({
        email: this.email,
        password: this.password
      }
      ).then((res) => {
        // console.log(res.token , res.success);
        if(res.data.success==true){
          localStorage.setItem('token',res.data.token)
          console.log(res);
          this.$router.push('/')
        }else{
          alert('登录失败')
          this.email = ''
          this.password = ''
          localStorage.removeItem('token')
        }
      })
      // axios.post('users/login',{
      //   email:this.email,
      //   password:this.password
      // }).then(res=>{
      //   console.log(this);
      //   console.log(res);
      // })
      // console.log('登录成功')
    },
    //注册账号事件
    add() {
      this.$router.push('/enroll')
    }
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;
  display: flex;

  .deng {
    background-color: #2d3a4b;

    .zi {
      width: 104%;
      text-align: right;
      color: #fff;
    }

    .btn {
      margin: 20px 0;
      width: 104%;
      height: 40px;
    }

    h1 {
      color: #fff;
      text-align: center;
    }

    .ipt {
      width: 100%;
      height: 40px;
      margin: 30px 0;
      position: relative;

      span {
        color: red;
      }

      i {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
        color: #ccc;
      }

      input {
        width: 100%;
        height: 100%;
        outline: none;
        padding-left: 30px;
      }
    }

    width: 600px;
    height: 400px;
    margin: auto;
    justify-content: center;
  }
}
</style>